<script setup>
import Dialog from "@/components/dialog/Dialog.vue";
import dialogJson from "@/components/dialog/dialogJson.js";
import UserService from "@/service/impl/UserService.js";
import UserInfoModel from "@/model/UserInfoModel.js";
import {onMounted, ref} from "vue";
import {message} from "@/service/index.js";
import {baseStore} from "@/store/baseStore.js";

const t = inject('$t')
const info = dialogJson()
const user = ref(new UserInfoModel())
const i = ref(true)
const bs = baseStore()

onMounted(() => {
    info.value.frame = true
    info.value.width = "50%"
    info.value.data = user.value
})

const show = () => {
    if(info.value.show){
        return
    }
    info.value.title = t('header.user.info')
    info.value.data.update = false
    infos()
}

const update = () => {
    if(info.value.show){
        return
    }
    info.value.title = t('header.user.update')
    info.value.close = false
    info.value.data.update = true
    i.value = false
    infos()
}

const expired = () => {
    if(info.value.show){
        return
    }
    info.value.title = t('header.user.expired')
    info.value.close = false
    info.value.data.update = true
    i.value = false
    infos()
}

const infos = () => {
    info.value.show = true
    info.value.load = true
    // 查当前用户
    UserService.info().then(res => {
        Object.assign(info.value.data, res.data)
        info.value.data.password = null
        info.value.load = false
    })
}



const updateInfo = () => {
    UserService.updateInfo(info.value.data).then(res => {
        message.success(t("btn.success"))
        info.value.show = false
        bs.update = false
        bs.expired = false
    }).catch(err => {

    })
}


defineExpose({show,update,expired})
</script>

<template>
    <Dialog :dialog="info">
        <el-form :rules="info.data.rules" :model="info.data" :label-width="100" :label-position="'left'" style="width: 100%;padding: 5px">
            <el-form-item :label="$t('user.name')" prop="nickName">
                <el-input v-model="info.data.nickName" autocomplete="off" :disabled="!i"/>
            </el-form-item>
            <el-form-item :label="$t('user.email')" prop="email">
                <el-input v-model="info.data.email" autocomplete="off" :disabled="!i"/>
            </el-form-item>
            <el-form-item :label="$t('user.newPassword')" prop="password">
                <el-input :placeholder="i?$t('user.pnp'):$t('user.pnw')" v-model="info.data.password" autocomplete="off"/>
            </el-form-item>
            <el-form-item :label="$t('user.okPassword')" prop="okPassword">
                <el-input :placeholder="i?$t('user.pnp'):$t('user.pnw')" v-model="info.data.okPassword" autocomplete="off"/>
            </el-form-item>
        </el-form>
        <template #table-dialog-btn>
            <el-button @click="info.show = false" v-if="i">{{$t('btn.cancel')}}</el-button>
            <el-button type="primary" @click="updateInfo" >{{$t('btn.confirm')}}</el-button>
        </template>
    </Dialog>
</template>

<style scoped lang="scss">

</style>